import React, { memo } from "react";
import PropTypes from "prop-types";

import { ThemWrapper } from "./styled";
const ThemHeader = memo(function ThemHeader(props) {
  const { title, keywords } = props;
  return (
    <ThemWrapper className="sprite_02">
      <div className="left">
        <h1 className="title">{title}</h1>
        <div className="keyword">
          {keywords.map((item) => {
            return (
              <div key={item} className="item">
                <a href="todo">{item}</a>
                <span className="divider">|</span>
              </div>
            );
          })}
        </div>
      </div>
      <div className="right">
        <a href="ddd">更多</a>
        <i className="icon sprite_02"></i>
      </div>
    </ThemWrapper>
  );
});
ThemHeader.propTypes = {
  title: PropTypes.string.isRequired,
  keywords: PropTypes.array,
};
ThemHeader.defaultProps = {
  keywords: [],
};
export default ThemHeader;
